<template>
  <div class="home">
    <topBar title="档案集约化全景平台" :show="true" />
    <div class="wrap">
      <div class="top">
        <div class="left">
          <div class="wrapBox">
            <div class="no">
              <div class="totalNum no-hd">
                <p class="totalDesc tit">档案总量</p>
                <ul>
                  <li>{{ totalNum }}</li>
                </ul>
                <div class="extraDesc">库余{{ restNum }}窍</div>
              </div>
            </div>
            <div class="no">
              <div class="totalNum no-hd">
                <p class="totalDesc tit">档案增量</p>
                <ul>
                  <li>{{ addNum }}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="pie panel">
            <div id="pie1">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div
                id="main1"
                :style="sy3"
              ></div>
            </div>
            <div class="panel-footer"></div>
          </div>
          <div class="pie2 panel">
            <div id="pie1">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <!-- <div
                id="destrucWarning"
                style="float: left; width: 100%; height: 2rem;"
              ></div> -->
              <div class="destrucWarning">
                <div class="destrucWarninglist destrucwarning">
                  <i
                    class="el-icon-delete"
                    style="color:red;fontSize:0.3rem;"
                  ></i>
                  已销毁{{ destrucNum }}窍
                </div>
                <div class="destrucWarninglist success">
                  <i
                    class="el-icon-s-promotion"
                    style="color:  rgb(16, 160, 243);fontSize:0.3rem"
                  ></i>
                  预销毁{{ preDestrucNum }}窍
                </div>
              </div>
            </div>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="flexWidth">
          <MapChartBCM
            @changeData="changeData"
            @changeSevenData="changeSevenData"
            @changeCityData="changeCityData"
            @changAllData="changAllData"
          />
        </div>
        <div class="right">
          <!--报警信息 -->
          <div class="warning panel">
            <p class="totalDesc tit ordesc">预警信息</p>
            <div class="text-container">
              <transition class="inner-container2" name="slide" mode="out-in">
                <p class="text2" :key="text.id">
                  <i class="el-icon-s-opportunity red"></i>{{ text.val }}
                </p>
              </transition>
            </div>
            <!-- <div class="text-container">
              <transition class="inner-container2" name="slide" mode="out-in">
                <p class="text2" :key="text.id">
                  <i class="el-icon-s-opportunity red"></i>{{ text2.val }}
                </p>
              </transition>
            </div> -->
            <div class="panel-footer"></div>
          </div>
          <div class="warning list panel">
            <p class="ordesc tit">调阅记录</p>
            <div id="box">
              <ul id="con2" ref="con2" :class="{ anim: animate == true }">
                <li
                  class="wrapBoxFlex"
                  v-for="(item, index) in items2"
                  :key="index"
                >
                  <span>{{ item.num }}</span
                  ><span>{{ item.date }}</span
                  ><span>{{ item.reson }}</span>
                  <img src="../../../public/m2-01.png" height="20" alt="" />
                </li>
              </ul>
            </div>
            <div></div>
            <div class="panel-footer"></div>
          </div>
          <div class="warning  panel">
            <div
              id="checkCondition"
              ref="bar"
              :style="sy2"
            ></div>
            <div></div>
            <div class="panel-footer"></div>
          </div>
        </div>
      </div>
      <el-row class="bottom">
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <div class="panel bottomBox chartH" style="width: 98%;">
            <div id="checkSheet" :style="sy1"></div>
            <div></div>
            <div class="panel-footer"></div></div
        ></el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <div class="panel bottomBox chartH" style="width: 98%;">
            <div id="chartLineBox" :style="sy1"></div>
            <div></div>
            <div class="panel-footer"></div></div
        ></el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <div class="panel bottomBox chartH" style="width: 98%;">
            <el-tabs
              tab-position="top"
              style="height: 2.8rem;width: 100%;"
              @tab-click="tabClick"
            >
              <el-tab-pane label="调阅">
                <div class="Chart2" v-if="activeName == 0">
                  <div id="myChart2" :style="sy2"></div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="明细">
                <div id="detailsChart" :style="sy2"></div>
              </el-tab-pane>
            </el-tabs>
            <div></div>
            <div class="panel-footer"></div></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import topBar from "@/components/topBar.vue";
// import mapChart from "@/components/mapChart.vue";
import MapChartBCM from "@/components/mapChart-BCM.vue";
let echarts = require("echarts/lib/echarts");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
const totalDuration = 3000;
let checkSheet;
let myChart2;
let myChart3;
export default {
  name: "Home",
  components: {
    topBar,
    MapChartBCM,
  },
  data() {
    return {
      sy1: {},
      s2: {},
      sy3: {},
      activeName: 0,
      // barWidth: 10,
      allData: ["2000", "3000", "4000", "5000"],
      allCatData: [2300, 4000, 2000, 3600, 2003, 2500, 1000],
      checkLegend: [
        {
          type: "scroll",
          icon: "square",
          right: "8%",
          align: "left",
          top: "30",
          itemGap: 20,
          // bottom:'50%',
          textStyle: {
            color: "#AAAAAA",
          },
          data: ["江苏", "广东"],
        },
        {
          type: "scroll",
          icon: "square",
          right: "8%",
          align: "left",
          top: "10",
          itemGap: 20,
          // bottom:'50%',
          textStyle: {
            color: "#AAAAAA",
          },
          data: ["上海", "福建"],
        },
      ],
      checkSerires: [
        {
          type: "bar",
          name: "江苏",
          itemStyle: {
            normal: {
              color: "rgb(33, 206, 236)",
              borderWidth: 2,
            },
          },
          data: [1009, 2009, 3190, 4810, 5465, 7654, 7777], // 对应江苏的数据（所有年份）
        },
        {
          type: "bar",
          name: "广东",
          itemStyle: {
            normal: {
              color: "rgb(33, 236, 151)",
              borderWidth: 2,
            },
          },
          data: [1002, 2003, 3005, 1000, 4465, 6454, 4777],
        },
        {
          type: "bar",
          name: "上海",
          itemStyle: {
            normal: {
              color: "rgb(153, 59, 15)",
              borderWidth: 2,
            },
          },
          data: [1900, 2900, 4009, 801, 3465, 7954, 3777],
        },
        {
          type: "bar",
          name: "福建",
          itemStyle: {
            normal: {
              color: "rgb(86, 89, 235)",
              borderWidth: 2,
            },
          },
          data: [1009, 2009, 3090, 1010, 1465, 2354, 7007],
        },
      ],
      currentDate: ["2021-02-02", "2021-03-03", "2021-04-04", "2021-05-05"],
      currentDate2: [
        "2020-11-02",
        "2020-12-03",
        "2021-01-04",
        "2021-02-05",
        "2021-03-06",
        "2021-04-07",
        "2021-05-08",
      ],
      currentDate3: [
        "2020-11-02",
        "2020-12-03",
        "2021-01-04",
        "2021-02-05",
        "2021-03-06",
        "2021-04-07",
        "2021-05-08",
      ],
      animate: false,
      items: [
        //消息列表对应的数组
        { num: "Q01GYQV34L", date: "2021-03-01 14:02:15" },
        { num: "Q01GYQV33L", date: "2021-03-02 15:35:45" },
        { num: "Q01GYQV37L", date: "2021-03-03 17:10:09" },
        { num: "Q01GYQV13L", date: "2021-03-04 18:30:16" },
      ],
      items2: [
        //消息列表对应的数组
        { num: "Q01GYQV16L", date: "2021-03-05 14:02:15", reson: "财务审计" },
        { num: "Q01GYQV13L", date: "2021-03-04 14:02:15", reson: "财务审计" },
        { num: "Q01GYQV83L", date: "2021-03-03 15:35:45", reson: "领导检查" },
        { num: "Q01GYQV88L", date: "2021-03-02 17:10:09", reson: "领导检查" },
        { num: "Q01GYQV09L", date: "2021-03-01 18:30:16", reson: "领导检查" },
      ],
      totalNum: "308999",
      addNum: "2395",
      destrucNum: 600,
      preDestrucNum: 101,
      restNum: "3456",
      arr: [
        "窍号[Q01GYQV33L]，调阅时间超长",
        "窍号[Q01GYQV49L]，回库异常",
        "窍号[Q02GYQV80L]，调阅时间超长",
        "窍号[Q01GYQV69L]，调阅时间超长",
      ],
      number: 0,
      number3: 1,
      number2: -1,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  beforeMount() {
    if (window.outerWidth <= 768) {
      this.sy1 = {
        width: "100%",
        height: "5.8rem",
      };
      this.sy2 = {
        width: "100%",
        height: "5.6rem",
      };
      this.sy3 = {
        width: "100%",
        height: "4.3rem",
      };
    } else {
      this.sy1 = {
        width: "100%",
        height: "2.8rem",
      };
      this.sy2 = {
        width: "100%",
        height: "2.4rem",
      };
      this.sy3 = {
        width: "100%",
        height: "3.3rem",
      };
    }
  },
  computed: {
    text() {
      // 展示的文本内容（滚动）
      return {
        id: this.number,
        val: this.arr[this.number],
      };
    },
    text2() {
      // 展示的文本内容（滚动）
      return {
        id: this.number3,
        val: this.arr[this.number3],
      };
    },
  },
  mounted() {
    // this.timer1 = setInterval(this.scroll, 2000);
    this.timer2 = setInterval(this.scroll2, 3000);
    setTimeout(() => {
      this.initData();
      // this.destrucWarn();
      this.drawLine();
      this.startMove();
      this.checkSheet();
      this.totalArch();
      this.checkCondition();
    }, 0);
  },
  // 组件销毁
  destroyed() {
    clearInterval(this.timer1);
    clearInterval(this.timer2);
  },
  methods: {
    changeData(data) {
      console.log("最近三天", data);
      this.currentDate = data;
      this.currentDate2 = data;
      this.currentDate3 = data;
      this.checkCondition();
      this.totalArch();
      this.drawLine();
    },
    changeSevenData(data) {
      console.log("最近7天", data);
      this.currentDate = data;
      this.currentDate2 = data;
      this.currentDate3 = data;
      this.checkCondition();
      this.totalArch();
      this.drawLine();
    },
    changeCityData() {
      this.destrucNum = 365;
      this.preDestrucNum = 122;
      this.totalNum = "4659";
      this.addNum = "836";
      this.allData = ["1200", "5540", "2000", "2500"];
      this.allCatData = [1300, 2000, 4000, 1600, 2803, 3500, 1900]; // 调阅量
      this.checkSerires = [
        {
          type: "bar",
          name: "浦东新区",
          barWidth: "40%",
          itemStyle: {
            normal: {
              color: "rgb(153, 59, 15)",
              borderWidth: 2,
            },
          },
          data: [1900, 2900, 4009, 801, 3465, 7954, 3777],
        },
      ];
      this.checkLegend = [
        {
          x: "60%",
          top: "1%",
          textStyle: {
            color: "#ffd285",
          },
          data: ["浦东新区"],
        },
      ];
      // this.barWidth = 20;
      checkSheet.clear();
      this.checkCondition();
      myChart2.clear();
      this.totalArch();
      myChart3.clear();
      this.drawLine();
    },
    changAllData() {
      this.totalNum = "308999";
      this.addNum = "2395";
      this.restNum = "3456";
      this.destrucNum = 600;
      this.preDestrucNum = 101;
      this.allData = ["2000", "3000", "4000", "5000"];
      this.allCatData = [2300, 4000, 2000, 3600, 2003, 2500, 1000];
      // this.barWidth = 10;
      this.checkSerires = [
        {
          type: "bar",
          name: "江苏",
          itemStyle: {
            normal: {
              color: "rgb(33, 206, 236)",
              borderWidth: 2,
            },
          },
          data: [1009, 2009, 3190, 4810, 5465, 7654, 7777], // 对应江苏的数据（所有年份）
        },
        {
          type: "bar",
          name: "广东",
          itemStyle: {
            normal: {
              color: "rgb(33, 236, 151)",
              borderWidth: 2,
            },
          },
          data: [1002, 2003, 3005, 1000, 4465, 6454, 4777],
        },
        {
          type: "bar",
          name: "上海",
          itemStyle: {
            normal: {
              color: "rgb(153, 59, 15)",
              borderWidth: 2,
            },
          },
          data: [1900, 2900, 4009, 801, 3465, 7954, 3777],
        },
        {
          type: "bar",
          name: "福建",
          itemStyle: {
            normal: {
              color: "rgb(86, 89, 235)",
              borderWidth: 2,
            },
          },
          data: [1009, 2009, 3090, 1010, 1465, 2354, 7007],
        },
      ];
      this.checkLegend = [
        {
          type: "scroll",
          icon: "square",
          right: "8%",
          align: "left",
          top: "30",
          itemGap: 20,
          // bottom:'50%',
          textStyle: {
            color: "#AAAAAA",
          },
          data: ["江苏", "广东"],
        },
        {
          type: "scroll",
          icon: "square",
          right: "8%",
          align: "left",
          top: "10",
          itemGap: 20,
          // bottom:'50%',
          textStyle: {
            color: "#AAAAAA",
          },
          data: ["上海", "福建"],
        },
      ];
      checkSheet.clear();
      myChart2.clear();
      myChart3.clear();
      this.totalArch();
      this.checkCondition();
      this.drawLine();
    },
    scroll2() {
      let con1 = this.$refs.con2;
      con1.style.marginTop = "-30px";
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function() {
        that.items2.push(that.items2[0]);
        that.items2.shift();
        con1.style.marginTop = "0px";
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500);
    },
    scroll() {
      let con1 = this.$refs.con1;
      con1.style.marginTop = "-30px";
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function() {
        that.items.push(that.items[0]);
        that.items.shift();
        con1.style.marginTop = "0px";
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500);
    },
    mEnter() {
      clearInterval(this.timer1);
    },
    mLeave2() {
      this.timer1 = setInterval(this.scroll, 3000);
    },
    mEnter2() {
      clearInterval(this.timer1);
    },
    mLeave() {
      this.timer1 = setInterval(this.scroll, 2000);
    },
    checkCondition() {
      if (checkSheet != null && checkSheet != "" && checkSheet != "undefined") {
        checkSheet.dispose();
      }
      checkSheet = this.$echarts.init(
        document.getElementById("checkCondition")
      );
      let option = {
        // backgroundColor: "#0f375f",
        title: {
          text: "盘点情况",
          // x: "center",
          top: 10,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "axis",
          ayisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: this.checkLegend,
        // barWidth: this.barWidth,
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //  改变x轴颜色
            lineStyle: {
              color: "#26D9FF",
            },
          },
          axisLabel: {
            //  改变x轴字体颜色和大小
            textStyle: {
              color: "rgba(250,250,250,0.6)",
              fontSize: 12,
            },
          },
        },
        xAxis: [
          {
            type: "category",
            data: this.currentDate,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              // rotate: 8,
              color: "#ccc",
              //fontFamily: 'PingFangSC',
              fontSize: 12,
              // fontWeight: 300
            },
          },
        ],
        series: this.checkSerires,
      };
      checkSheet.setOption(option);
      window.addEventListener("resize", function() {
        checkSheet.resize();
      });
    },
    checkSheet() {
      let checkSheet = this.$echarts.init(
        document.getElementById("checkSheet")
      );
      let option = {
        title: {
          text: "上收情况",
          x: "30%",
          top: 10,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        // barWidth:  12,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        legend: [
          {
            type: "scroll",
            icon: "square",
            right: "1%",
            align: "left",
            top: "10",
            itemGap: 20,
            // bottom:'50%',
            textStyle: {
              color: "#AAAAAA",
            },
            data: ["装箱", "入当地库"],
          },
          {
            type: "scroll",
            icon: "square",
            right: "1%",
            align: "left",
            top: "30",
            itemGap: 20,
            // bottom:'50%',
            textStyle: {
              color: "#AAAAAA",
            },
            data: ["入窍楚库"],
          },
        ],
        // legend: {
        //   data: ["装箱", "入当地库", "入窍楚库"],
        //   top: 10,
        //   right: "10",
        //   textStyle: {
        //     color: "rgba(250,250,250,0.6)",
        //     fontSize: 12,
        //   },
        // },
        xAxis: {
          type: "value",
          splitLine: false,
          axisLine: {
            //  改变x轴颜色
            lineStyle: {
              color: "#ccc",
            },
          },
          axisLabel: {
            showMaxLabel: true,
            color: "#ccc",
            fontFamily: "PingFangSC",
            fontSize: 12,
            fontWeight: 300,
          },
        },
        yAxis: {
          type: "category",
          data: ["银行川沙支行", "德平路支行", "东方路支行", "高化支行"],
          splitLine: false,
          axisLine: {
            //  改变x轴颜色
            lineStyle: {
              color: "#ccc",
            },
          },
          axisLabel: {
            showMaxLabel: true,
            color: "#ccc",
            fontFamily: "PingFangSC",
            fontSize: 12,
            fontWeight: 300,
          },
        },
        series: [
          {
            name: "装箱",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            color: "#4C98FB",
            data: [320, 402, 201, 102],
          },
          {
            name: "入当地库",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            color: "#26C7C8",
            data: [440, 132, 201, 155],
          },
          {
            name: "入窍楚库",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            color: "#26C978",
            data: [220, 182, 191, 177],
          },
        ],
      };
      checkSheet.setOption(option);
      window.addEventListener("resize", function() {
        checkSheet.resize();
      });
    },
    totalArch() {
      if (myChart2 != null && myChart2 != "" && myChart2 != "undefined") {
        myChart2.dispose();
      }
      myChart2 = this.$echarts.init(document.getElementById("chartLineBox"));
      var data1 = [4320, 5240, 5270, 6520, 6650, 6850, 7260];
      // var data2 = [7.2, -2.6, 4.7, -3.7, -5.4, -0.5, 3.4];
      //定义两个上下箭头的矢量路径
      // var up =
      //   "path://M286.031,265l-16.025,3L300,223l29.994,45-16.041-3-13.961,69Z";
      // var down =
      //   "path://M216.969,292l16.025-3L203,334l-29.994-45,16.041,3,13.961-69Z";
      //遍历data2里面元素的正负定义一个矢量路径的数组
      // var path = [up, down, up, down, down, down, up];
      let option = {
        title: {
          text: "档案总量",
          x: "center",
          top: 10,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.currentDate2,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              // rotate: 8,
              color: "#ccc",
              //fontFamily: 'PingFangSC',
              fontSize: 12,
              // fontWeight: 300
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            data: this.allData,
            axisLabel: {
              // rotate: 8,
              color: "#ccc",
              //fontFamily: 'PingFangSC',
              fontSize: 12,
              // fontWeight: 300
            },
          },
        ],
        series: [
          // {
          //   name: "",
          //   type: "pictorialBar",
          //   symbol: function(data, params) {
          //     return path[params.dataIndex];
          //   },
          //   symbolSize: [10, 20],
          //   symbolOffset: [0, -15],
          //   color: "orange",
          //   symbolPosition: "end",
          //   label: {
          //     show: true,
          //     position: "top",
          //     formatter: function(params) {
          //       return data2[params.dataIndex];
          //     },
          //     fontSize: 10,
          //     fontWeight: "bold",
          //     color: "#34DCFF",
          //   },
          //   data: data1,
          // },
          {
            name: "档案上收",
            type: "bar",
            barWidth: "40%",
            data: data1,
          },
        ],
      };
      myChart2.setOption(option);
      window.addEventListener("resize", function() {
        myChart2.resize();
      });
    },
    drawLine() {
      if (myChart3 != null && myChart3 != "" && myChart3 != "undefined") {
        myChart3.dispose();
      }
      myChart3 = this.$echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart3.setOption({
        // backgroundColor: "#04243E",
        title: {
          // text: '调阅信息统计',
          //  x: "center", //x轴方向对齐方式
          //  color:"#fff"
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          //这个表示在容器里的大小
          left: "3%",
          right: "8%",
          bottom: "3%",
          containLabel: true,
          // left: "5%",
          // right: "5%",
          // bottom: "2%",
          // top: 40,
          // width: "auto",
          // height: "auto",
          // containLabel: true,
        },
        // calculable : true,
        legend: {
          //上边图例部分
          data: ["调阅总量"],
          textStyle: {
            //图例文字的样式
            color: "#ccc",
            fontSize: 14,
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          //设置x轴
          show: true,
          type: "category",
          // name:'时间',
          boundaryGap: true, //坐标轴两边不留白
          data: this.currentDate3, //数据
          interval: 0,
          axisTick: {
            show: false,
            inside: true,
            lineStyle: {
              color: "#ccc",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
            },
          },
          axisLabel: {
            // rotate: 8,
            color: "#ccc",
            //fontFamily: 'PingFangSC',
            fontSize: 12,
            // fontWeight: 300
          },
        },
        yAxis: {
          type: "value",
          show: true,
          // name:'总量',
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              width: 1,
              color: "#636363",
            },
          },

          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
          axisTick: {
            lineStyle: {
              color: "#ccc",
            },
          },
          axisLabel: {
            showMaxLabel: true,
            color: "#ccc",
            fontFamily: "PingFangSC",
            fontSize: 12,
            fontWeight: 300,
          },
        },
        series: [
          {
            name: "调阅总量",
            // stack: '总量',
            data: this.allCatData,
            type: "line",
            smooth: 0.4,
            symbol: "circle",
            symbolSize: 7,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#63A8E8",
                },
                color: "#63A8E8",
                borderWidth: 1,
                borderColor: "#63A8E8",
              },
            },
            areaStyle: {
              //这是阴影部分
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(63,227,236,0.8)",
                  },
                  {
                    offset: 0.4,
                    color: "rgba(63,227,236,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(63,227,236,0.00)",
                  },
                ]),
                // ['rgba(63,227,236,0.3)'],
              },
            },
          },
        ],
      });
      window.addEventListener("resize", function() {
        myChart3.resize();
      });
    },
    startMove() {
      setTimeout(() => {
        if (this.number === 2) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        if (this.number3 === 2) {
          this.number3 = 0;
        } else {
          this.number3 += 1;
        }
        this.startMove();
      }, totalDuration);
    },
    handleNodeClick() {},
    destrucWarn() {
      var destrucWarn = echarts.init(document.getElementById("destrucWarning"));
      let color = ["#ff4343", "#f69846", "#f6d54a"];
      let names = ["已销毁", "预销毁", "取消销毁"];
      let data = [1114, 444, 501];
      let list = [];
      let total = 0;
      for (let i in data) {
        total += data[i];
      }

      let placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      };

      let rich = {
        white: {
          align: "center",
          // padding: [3, 0],
        },
      };

      for (let i in data) {
        list.push(
          {
            value: data[i],
            name: names[i],
            itemStyle: {
              normal: {
                borderWidth: this.$fontSize.fontSize(0.15),
                shadowBlur: this.$fontSize.fontSize(0.02),
                borderColor: color[i],
                shadowColor: color[i],
                color: color[i],
              },
            },
          },
          {
            value: total / 30,
            name: "",
            itemStyle: placeHolderStyle,
          }
        );
      }

      let func = (params) => {
        let percent = ((params.value / total) * 100).toFixed(1);
        let name = params.name.replace(/\n/g, "");
        if (params.name !== "") {
          return name + "\n{white|" + percent + "%}";
        } else {
          return "";
        }
      };
      destrucWarn.setOption({
        // backgroundColor: "#04243E",
        tooltip: {
          show: false,
        },
        legend: {
          orient: "vertical",
          data: names,
          icon: "circle",
          right: "5px",
          top: "10px",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            clockWise: false,
            startAngle: "90",
            center: ["40%", "50%"],
            radius: ["50%", "51%"],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  formatter: func,
                  rich: rich,
                },
                labelLine: {
                  length: 20,
                  length2: 30,
                  show: true,
                  color: "#00ffff",
                },
              },
            },
            data: list,
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return idx * 50;
            },
          },
          {
            name: "",
            type: "pie",
            center: ["40%", "50%"],
            radius: ["49%", "49%"],
            itemStyle: {
              color: "transparant",
            },
            startAngle: "90",
            data: [
              {
                value: total,
                name: "",
                label: {
                  normal: {
                    show: true,
                    // formatter: "{c|{c}} {b|条记录}",
                    rich: {
                      c: {
                        color: "rgb(98,137,169)",
                        fontSize: 12,
                        fontWeight: "bold",
                        lineHeight: this.$fontSize.fontSize(0.05),
                      },
                      b: {
                        color: "rgb(98,137,169)",
                        fontSize: 12,
                        lineHeight: 5,
                      },
                    },
                    textStyle: {
                      fontSize: 12,
                      fontWeight: "bold",
                    },
                    position: "center",
                  },
                },
              },
            ],
          },
        ],
      });
      window.addEventListener("resize", function() {
        destrucWarn.resize();
      });
    },
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main1"));
      // 绘制图表
         myChart.setOption({
        // backgroundColor: '#FBFBFB',
        title: {
          text: "窍状态", //主标题
          x: "center", //x轴方向对齐方式
          top: this.$fontSize.fontSize(0.1),
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "item",
          borderColor: "rgba(255,255,255,.3)",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          padding: 5,
          formatter: function(parms) {
            var str =
              parms.marker +
              "" +
              parms.data.name +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        legend: {
          orient: "vertical",
          left: "right",
          top: this.$fontSize.fontSize(0.5),
          data: ["正常存储", "调阅中", "销毁中"],
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              { value: 45000, name: "正常存储" },
              { value: 1200, name: "调阅中" },
              { value: 3500, name: "销毁中" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                color: function(params) {
                  //自定义颜色
                  var colorList = ["#60cda0", "#ff9f7f", "#32c5e9"];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      });
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    initDetails() {
      // detailsChart
      if (
        detailsChart != null &&
        detailsChart != "" &&
        detailsChart != "undefined"
      ) {
        detailsChart.dispose();
      }
      var detailsChart = echarts.init(document.getElementById("detailsChart"));
      detailsChart.setOption({
        color: ["#409EFF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          x: "30%",
          top: "1%",
          textStyle: {
            color: "#ffd285",
          },
          data: ["年度调阅总量"],
        },
        grid: {
          left: "3%",
          right: "35%",
          top: "16%",
          bottom: "6%",
          containLabel: true,
        },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {},
          },
        },
        // barWidth: 12,
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            textStyle: {
              color: "#ccc",
              fontSize: 12,
            },
          },
          boundaryGap: true, //false时X轴从0开始
          data: ["2016", "2017", "2018", "2019", "2020", "2021"],
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#ccc",
            },
          },
          type: "value",
        },
        series: [
          {
            name: "年度调阅总量",
            smooth: true,
            type: "bar",
            barWidth: "40%",
            symbolSize: 8,
            //symbol: 'circle',
            data: [49000, 55050, 30009, 50000, 55120, 66082, 78080],
          },
          {
            type: "pie",
            center: ["78%", "40%"],
            radius: ["25%", "30%"],
            name: "调阅形式",
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            startAngle: "90",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                },
                labelLine: {
                  length: 10,
                  length2: 10,
                  show: true,
                  color: "#00ffff",
                },
              },
            },
            data: [
              {
                value: 335,
                name: "物流派送",
                itemStyle: {
                  normal: {
                    color: "#FF3300",
                  },
                },
              },
              {
                value: 310,
                name: "原件调阅",
                itemStyle: {
                  normal: {
                    color: "#FFFF00",
                  },
                },
              },
              {
                value: 234,
                name: "电子调阅",
                itemStyle: {
                  normal: {
                    color: "#00FF00",
                  },
                },
              },
            ],
          },
        ],
      });
    },
    tabClick(target) {
      if (target.index == "0") {
        this.$nextTick(() => {
          this.drawLine();
        });
      } else if (target.index == "1") {
        this.$nextTick(() => {
          this.initDetails();
        });
      }
    },
  },
};
</script>
<style>
.el-tabs__item {
  height: 0.35rem;
  line-height: 0.35rem !important;
}
.el-tabs__header {
  margin: 0;
}
.el-tree {
  background-color: transparent;
  color: #fff;
}
.el-tree-node__content:hover {
  background-color: #2a91f8 !important;
}
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #2a91f8 !important;
}
.el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  z-index: 1;
}
.el-tabs__item {
  color: #fff;
}
</style>
<style scoped>
.home {
  /* width: 100%;
  height: 100vh;
  overflow-y: hidden; */
  min-height: 100%;
  height: auto !important;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background-color: #06164a;

  /* overflow-x: hidden; */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-size: cover;
  background-position: center center;
}
@font-face {
  font-family: electronicFont;
  src: url(../../assets/font/DS-DIGIT.TTF);
}
/* .warning{
  width: 5.325rem;
} */
.panel {
  position: relative;
  /* height: 3.875rem; */
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(255, 255, 255, 0.04) url(../../assets/line\(1\).png);
  padding: 0 0.1875rem 0;
  margin-bottom: 0.15rem;
}

.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}
.panel .panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}
.panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}
.pie {
  height: 3.3rem;
}
.pie2 {
  height: 2rem;
}
.destrucWarning {
  display: flex;
  justify-content: space-around;
  height: 2rem;
}
.destrucWarninglist {
  margin-top: 0.4rem;
  width: 40%;
  height: 1.2rem;
  text-align: center;
  line-height: 1.2rem;
  border-radius: 0.1rem;
  color: #fff;
  font-size: 0.2rem;
  white-space: nowrap;
  background-color: #f13e08cc;
}
.success {
  background-color: rgba(16, 160, 243, 0.829);
}
.wrap {
  height: calc(100% - 0.75rem);
}
.top {
  display: flex;
}
.left {
  /* width: 6.8rem; */
  width: 30%;
  margin-left: 0.125rem;
}
.right {
  /* width: 5.45rem; */
  width: 25%;
  margin-right: 0.125rem;
}
.flexWidth {
  /* flex: 1; */
  width: calc(100% - 55%);
}
.card {
  width: 3.4rem;
  margin: 0.125rem auto;
  background-color: #2a91f8;
  text-align: center;
  letter-spacing: 0.2em;
  line-height: 0.25rem;
}
.padding {
  padding: 0.25rem 0;
}
.totalNum {
  font-size: 0.25rem;
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding-top: 0.125rem;
}
.text-container {
  color: #2a91f8;
  padding: 0.125rem 0;
  text-align: left;
}
.text2 {
  font-size: 0.185rem;
  color: #fff;
}
.list {
  color: #fff;
  height: 2.6rem;
}
.ulWarning {
  color: #fff;
  margin-left: 0.125rem;
}
.ulWarning > li {
  list-style: none;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 0.185rem;
  padding: 0.1rem 0;
  border-bottom: 0.01rem solid #454;
}
.bottom {
  /* display: flex;
  justify-content: space-between; */
  margin-left: 0.125rem;
}
#myChart2 {
  margin-right: 0.125rem;
}
.Chart2 {
  /* width: 8rem; */
  width: 100%;
  height: calc(2.8rem -0.35rem);
  margin-right: 0.125rem;
}
.tit {
  text-align: center;
  letter-spacing: 0.2em;
  line-height: 0.25rem;
  font-weight: 600;
  font-size: 0.2rem;
  color: #fff;
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  white-space: nowrap;
}
.detailDesc {
  color: #909399;
  font-size: 0.16rem;
  padding-left: 0.25rem;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s linear;
}
.slide-leave-to {
  transform: translateY(-0.25rem);
}
.slide-enter {
  transform: translateY(0.25rem);
}
.no {
  background: rgba(101, 132, 226, 0.1);
  /* padding: 0.1875rem; */
  margin-bottom: 0.1875rem;
  width: 49%;
  /* width: 3.332rem; */
}
.no .no-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}
.no .no-hd::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  top: 0;
  left: 0;
}
.no .no-hd::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
}
.no .no-hd ul {
  display: flex;
}
.no .no-hd ul li {
  position: relative;
  flex: 1;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.875rem;
  color: #ffeb7b;
  padding: 0.05rem 0;
  font-family: electronicFont;
  font-weight: bold;
  list-style: none;
}
.no .no-hd ul li:first-child::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}
.no .no-bd ul {
  display: flex;
}
.no .no-bd ul li {
  flex: 1;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.225rem;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 0.125rem;
}
.extraDesc {
  font-size: 0.15rem;
  font-weight: 400;
  position: absolute;
  top: -0.1rem;
  right: -0.1rem;
  line-height: 0.8rem;
  white-space: nowrap;
  color: #fff;
  transform: rotate(30deg);
  border: 1px solid #0d8b97;
  background-color: #066c96;
  border-radius: 50%;
  width: 0.8rem;
  height: 0.8rem;
}
.ordesc {
  color: #fff;
  text-align: left;
  margin-left: 0.125rem;
  flex-wrap: 600;
  font-size: 0.2rem;
}
.red {
  color: brown;
  font-size: 0.2rem;
}
.wrapBoxFlex {
  display: flex;
  justify-content: space-around;
  margin-bottom: 0.2rem;
  font-size: 0.185rem;
  margin-top: 0.1rem;
}
ul > .wrapBoxFlex > span {
  /* color: #909399; */
  color: #fff;
  line-height: 20px;
  white-space: nowrap;
}
ul > li.wrapBoxFlex {
  border-bottom: 0.01rem solid #909399;
  padding: 0.1rem;
}
ul > li.wrapBoxFlex:hover {
  /* box-shadow: -10px 0px 15px #034c6a inset,
    10px 0px 15px #034c6a inset; */
  background-color: #07648a;
  cursor: pointer;
}
ul > li {
  list-style: none;
}
.wrapBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#box {
  overflow: hidden;
  transition: all 0.5s;
  height: 1.65rem;
}
.anim {
  transition: all 0.5s;
}
.opration {
  color: #fff;
  display: flex;
  padding: 0.3rem 0;
}
.chartH {
  height: 2.8rem;
}

@media only screen and (max-device-width: 768px) {
  .top {
    flex-wrap: wrap;
  }
  .extraDesc {
    width: 30px;
    height: 30px;
  }
  .chartH {
    height: 6rem;
  }
    .Chart2 {
    height: calc(6rem -0.35rem);
  }
  .left,
  .flexWidth,
  .right {
    width: 100%;
  }
  .list {
    height: 5rem;
  }
  .pie {
    height: 4.3rem;
  }
  .ordesc {
    font-size: 14px;
  }
  #box {
    height: 4.2rem;
  }
  #box > #con2 > .wrapBoxFlex,
  .text2 {
    font-size: 12px;
  }
}
</style>
